<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>闲言轻博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>

    <style>
        .contar-wrap {
            background-color: white;
            padding: 20px;
        }

        .classify {
            background-color: white;
            padding: 10px;
        }

        .classify_item {
            padding: 0px 20px;
            font-size: 15px;
            margin: 10px 0px;
        }

        .classify_item.active, .classify_item:hover {
            cursor: pointer;
            color: #ff8000;
            font-weight: bold;
            border: 1px solid;
            border-radius: 5px;
        }
    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap">
    <div class="container" style="width: 1000px;">
        <div class="contar-wrap" id="collect">
            <h2 style="margin-left: 20px;">我的收藏</h2>

            <div class="classify">
                <form class="layui-form">
                    <div class="grade-classify">
                        <div class="grade_classify" style="display: flex; flex-direction: row;margin: 20px;">
                            <div class="classify_item active" @click="selectGrade(0, $event)">
                                全部分类
                            </div>
                            <div class="classify_item" v-for="g in grades" @click="selectGrade(g.id, $event)">
                                {{g.name}}
                            </div>
                        </div>
                    </div>
                    <div class="collect-type"><!--文章或视频-->

                        <div class="layui-inline">
                            <label class="layui-form-label" style="font-size:15px; font-weight: 600">文章/视频</label>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="city" lay-verify="" v-model="collectType" lay-filter="collectType">
                                    <option value="1">文章</option>
                                    <option value="2">视频</option>
                                </select>
                            </div>

                        </div>
                    </div>
                </form>
            </div>

            <div class="collect-content">
                <div class="collect-article" v-if="showArticle">
                    <ul class="layui-timeline" id="collectArticle">
                        <li v-for="article in articles" class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">{{article.collectTime}}</h3>
                                <div class="item-box  layer-photos-demo1 layer-photos-demo">
                                    <h3 style="line-height: 30px;">
                                        <a :href="'/teacher/article/details.html?id='+article.article.id">
                                            {{article.article.title}}</a>
                                    </h3>
                                    <h5 style="margin-bottom: 20px;">发布于：<span>{{article.article.releaseTime}}</span>
                                    </h5>
                                    <p v-html="article.article.content"></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="collect-video" v-else="">
                    <div class="video" id="collectVideo">
                        <div v-for="v in videos" class="layui-card" style="width: 32%; float: left;margin: 5px;">
                            <div class="layui-card-body card-body">
                                <a :href="'/teacher/video/detail.html?id='+v.id">
                                    <img :src="v.coverImg" style="width:100%; height: 240px;" />
                                </a>
                            </div>
                            <div class="card-center">
                                <div class="card-title">{{v.title}}</div>
                                <div class="card-course">{{v.course.name}}</div>
                            </div>
                            <div class="card-footer">
                                <img src="/upload/user/images/me.jpg" />
                                <span>admin</span>
                            </div>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div th:include="/teacher/templates::footer"></div>
<script src="/vue/vue.js"></script>
<script>

    CollectVue = new Vue({
        el: "#collect",
        data: {
            gradeId:0,
            articles: [],
            videos: [],
            showArticle: true,
            grades: [],
            collectType:1,   //收藏类型
        },
        created() {
            loadArticle();
            $.get('/api/grade', res => {
                this.grades = res.data;
            });
        },
        methods: {
            selectGrade(gradeId, event) {
                $(event.target).siblings().removeClass('active')
                $(event.target).addClass('active')
                this.gradeId = gradeId;
                this.articles = [];
                this.videoes = [];
                // layui.use('flow', function(){
                //     var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                //     var flow = layui.flow;
                    loadArticle();
                // });
            },
            toggleContent(type){
                if(type==1){
                    this.showArticle = true;
                }else{
                    this.showArticle = false;
                }
            }
        }
    })

    function loadArticle() {
        layui.use('flow', function () {
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#collectArticle' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('/api/collect/article', {page: page, size: 5, gradeId:CollectVue.gradeId}, function (res) {
                        //假设你的列表返回在data集合中
                        $.each(res.data.content, function (index, item) {
                            CollectVue.articles.push(item);
                        });
                        next('', page < res.data.totalPages);
                    });
                }
            });
            flow.load({
                elem: '#collectVideo' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('/api/collect/video', {page: page, size: 5, gradeId:CollectVue.gradeId}, function (res) {
                        //假设你的列表返回在data集合中
                        $.each(res.data.content, function (index, item) {
                            CollectVue.videos.push(item);
                        });
                        next('', page < res.data.totalPages);
                    });
                }
            });
        });
    }

    layui.use(['form'], (form) =>{
        form.on('select(collectType)', (data) =>{
            console.log(data.value)
            CollectVue.toggleContent(data.value)
        })
    })

</script>
</body>
</html>